<template>
	<a-form-item
	class="selectedUser"
	:class="[hasError ? 'hhg-form-item-has-error' : '', userClass ? userClass : '']"
	:label="labelName"
	:name="name"
	:rules="rules">
		<!-- 文本输入框 -->
		<a-input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" v-bind="attrs" readonly @click="memberFn" class="selectedUserInput"/>
	</a-form-item>
	<!-- 弹出会员 -->
	<a-modal centered :width="420" v-model:visible="visible" bodyStyle="padding:0" :footer="null" ref="modalRef" :wrap-style="{ overflow: 'hidden' }">
		<SelectMember @selectedMember="selectedMember" @closeModal="memberFn" @clearRight="clearRight" @clearMebmer="clearMebmer" @fuzzySearch="fuzzySearch" :config="{
			type, multiple, list: memberList, subTitle, isTree, displayList: hhgDisplayList //1-返回人员姓名+人员code  2-返回人员姓名+人员code + 返回单个数据流,multiple-false是单选true是多选
		}"/>
		<!-- 拖动 -->
		<template #title>
			<div ref="modalTitleRef" style="width: 100%; cursor: move">{{ title }}</div>
		</template>
		<template #modalRender="{ originVNode }">
			<div :style="transformStyle">
				<component :is="originVNode" />
			</div>
		</template>
	</a-modal>
</template>
<script setup>
import { onMounted, ref, defineProps, defineComponent, useAttrs, watch, defineEmits, watchEffect, computed } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue'
import SelectMember from './hhg-singleModal'
import { EventBus } from './utils'
//拖动
import { useDraggable } from '@vueuse/core'

defineComponent({
  components: {
    UserOutlined,
    SelectMember
  }
})
//父组件传过来的值
const props = defineProps({
  config: {
	type: Object,
	default: ()=> {}
  }
})
const emit = defineEmits(['fuzzySearch', 'selectedMember', 'clearMebmer', 'onClickPopup'])

const fuzzySearch = (data) => {
	emit('fuzzySearch', { text: data.text, letters: data.letters })
}
const labelName = ref(props.config.labelName)
const name = ref(props.config.name)
const isRead = ref(null)
const rules = ref(props.config.rules)
const userClass = ref(props.config.className)
const hhgDisplayList = ref([])
watch(() => props.config.isRead, (val) => {
  if (val) {
	isRead.value = val
  }
}, { immediate: true }, { deep: true })


const visible = ref(false)
const memberList = ref([])
const title = ref(props.config.title)
const subTitle = ref('')
const isTree = ref(false)
const multiple = ref(props.config.multiple)
const type = ref(props.config.type)
watch(() => props.config, (val) => {
  if (val) {
	memberList.value = val.memberList
	subTitle.value = val.subTitle
	hhgDisplayList.value = val.displayList
	isTree.value = val.isTree ? val.isTree : false
  }
}, { immediate: true }, { deep: true });
//组件属性穿透
const attrs = useAttrs()

//子组件触发函数
const selectedMember = (value)=> {
	emit('selectedMember', value)
	memberFn()
}
const clearRight = ()=> {
	memberFn()
}
const clearMebmer = ()=> {
	memberList.value.forEach(i=> {
		i.selected = false
	})
	emit('clearMebmer')
	memberFn()
}

const memberFn = ()=> {
	if (isRead.value) return
	visible.value = !visible.value
	if (visible.value) {
		EventBus.emit('radioSinglePopup')
		emit('onClickPopup')
	}
}
//拖动
const modalTitleRef = ref(null)
const { x, y, isDragging } = useDraggable(modalTitleRef)
const startX = ref(0)
const startY = ref(0)
const startedDrag = ref(false)
const transformX = ref(0)
const transformY = ref(0)
const preTransformX = ref(0)
const preTransformY = ref(0)
const dragRect = ref({
	left: 0,
	right: 0,
	top: 0,
	bottom: 0
})
watch([x, y], () => {
	if (!startedDrag.value) {
		startX.value = x.value
		startY.value = y.value
		const bodyRect = document.body.getBoundingClientRect()
		const titleRect = modalTitleRef.value.getBoundingClientRect()
		dragRect.value.right = bodyRect.width - titleRect.width
		dragRect.value.bottom = bodyRect.height - titleRect.height
		preTransformX.value = transformX.value
		preTransformY.value = transformY.value
	}
	startedDrag.value = true
})
watch(isDragging, () => {
	if (!isDragging) {
		startedDrag.value = false
	}
})
watchEffect(() => {
	if (startedDrag.value) {
		transformX.value =
			preTransformX.value +
			Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
			startX.value;
		transformY.value =
			preTransformY.value +
			Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
			startY.value
	}
})
const transformStyle = computed(() => {
	return {
		transform: `translate(${transformX.value}px, ${transformY.value}px)`
	}
})

// mounted
onMounted(() => {
})

</script>
<style scoped lang="scss"></style>